<template>
    <view class="app">
        <view class="header">
            <view class="one">
                <view @click="fanhui">
                    <u-icon name="arrow-left" color="#2979ff" size="16"></u-icon>
                </view>
                <view style="display: flex;">
                    <view class="a" :class="{ active: currentTab === 0 }" @click="switchTab(0)" data-tab="0">普通任务</view>
                    <view class="b" :class="{ active: currentTab === 1 }" @click="switchTab(1)" data-tab="1">跟进任务</view>
                </view>
                <view>
                    <img src="/static/img/13.png" alt="" style="height: 20px;width: 20px; vertical-align: middle;"><span
                        style=" color: rgb(0, 121, 254);">筛选</span>
                </view>
            </view>
        </view>
        <view class="content">
            <view v-if="currentTab === 0">

                <view style="border-bottom:1px solid #ccc ; background-color: #fff;">
                    <u-tabs :list="list" @click="click" lineWidth="20" lineHeight="7" lineColor="white" :activeStyle="{
                        color: '#09f',
                        transform: 'scale(1.05)'
                    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
                </view>

                <view
                    style="border-left: 3px solid orange; display: flex; justify-content: space-between; padding: 20px 20px; box-shadow: 0 0 0 10px #fff; border-radius: 0 10px 10px 0; width: 320px; margin-top: 10px;">
                    <view style="color: #666;">
                        <p @click="yukehu" style="font-size: 14px; font-weight: bold; height: 30px;">与客户沟通报价事宜</p>
                        <p style="font-size: 12px; height: 30px;">2019-03-23 22:31 <span>紧急</span></p>
                        <p style="width: 200px;">
                            <u-line-progress :percentage="50" activeColor="blue" height="8" inactiveColor="#fff">
                                <text class="percentage">{{ 50 }}%</text>
                            </u-line-progress>
                        </p>
                    </view>
                    <view style="text-align: center;">
                        <p style="color: #999; display: flex; align-items: center; font-size: 10px;"><text
                                style="width: 10px;height: 10px; border-radius: 50%;margin-right: 5px; display: block; background-color: #fff;border:1px solid #ccc ;"></text>
                            进行中</p>
                        <p @click="yutouxiang" style="margin-top: 10px;"><img src="/static/img/11.png" alt=""
                                style="width: 40px;height: 40px; border-radius: 50%;"></p>
                        <p style="color: #666;">赵小刚</p>
                    </view>
                </view>

                <view
                    style="border-left: 3px solid #09f; display: flex; justify-content: space-between; padding: 20px 20px; box-shadow: 0 0 0 10px #fff; border-radius: 0 10px 10px 0; width: 320px; margin-top: 10px;">
                    <view style="color: #666;">
                        <p @click="yukehu" style="font-size: 14px; font-weight: bold; height: 30px;">与客户沟通报价事宜</p>
                        <p style="font-size: 12px; height: 30px;">2019-03-23 22:31 <span>紧急</span></p>
                        <p style="width: 200px;">
                            <u-line-progress :percentage="0" activeColor="blue" height="8" inactiveColor="#fff">
                                <text class="percentage">{{ 0 }}%</text>
                            </u-line-progress>
                        </p>
                    </view>
                    <view style="text-align: center;">
                        <p style="color: #999; display: flex; align-items: center; font-size: 10px;">
                            <img src="/static/shizhong.png" alt=""
                                style="width: 10px; height: 10px;vertical-align: middle; margin-right: 5px;">
                            未开始
                        </p>
                        <p @click="yutouxiang" style="margin-top: 10px;"><img src="/static/img/11.png" alt=""
                                style="width: 40px;height: 40px; border-radius: 50%;"></p>
                        <p style="color: #666;">赵小刚</p>
                    </view>
                </view>
                <view
                    style="border-left: 3px solid rgb(75, 206, 208); display: flex; justify-content: space-between; padding: 20px 20px; box-shadow: 0 0 0 10px #fff; border-radius: 0 10px 10px 0; width: 320px; margin-top: 10px;">
                    <view style="color: #666;">
                        <p @click="yukehu" style="font-size: 14px; font-weight: bold; height: 30px;">与客户沟通报价事宜</p>
                        <p style="font-size: 12px; height: 30px;">2019-03-23 22:31 <span>紧急</span></p>
                        <p style="width: 200px;">
                            <u-line-progress :percentage="50" activeColor="" height="8" inactiveColor="#fff">
                                <text class="percentage">{{ 50 }}%</text>
                            </u-line-progress>
                        </p>
                    </view>
                    <view style="text-align: center;">
                        <p style="color: #999; display: flex; align-items: center; font-size: 10px;">
                            <img src="/static/yiquxiao.png" alt=""
                                style="width: 10px; height: 10px;vertical-align: middle; margin-right: 5px;">
                            已取消
                        </p>
                        <p @click="yutouxiang" style="margin-top: 10px;"><img src="/static/img/11.png" alt=""
                                style="width: 40px;height: 40px; border-radius: 50%;"></p>
                        <p style="color: #666;">赵小刚</p>
                    </view>
                </view>


                <view
                    style="border-left: 3px solid rgb(251, 98, 96); display: flex; justify-content: space-between; padding: 20px 20px; box-shadow: 0 0 0 10px #fff; border-radius: 0 10px 10px 0; width: 320px; margin-top: 10px;">
                    <view style="color: #666;">
                        <p @click="yukehu" style="font-size: 14px; font-weight: bold; height: 30px;">与客户沟通报价事宜</p>
                        <p style="font-size: 12px; height: 30px;">2019-03-23 22:31 <span>紧急</span></p>
                        <p style="width: 200px;">
                            <u-line-progress :percentage="50" activeColor="red" height="8" inactiveColor="#fff">
                                <text class="percentage">{{ 50 }}%</text>
                            </u-line-progress>
                        </p>
                    </view>
                    <view style="text-align: center;">
                        <p style="color: #999; display: flex; align-items: center; font-size: 10px;">
                            <img src="/static/yichaoshi.png" alt=""
                                style="width: 10px; height: 10px;vertical-align: middle; margin-right: 5px;">
                            已超时
                        </p>
                        <p @click="yutouxiang" style="margin-top: 10px;"><img src="/static/img/11.png" alt=""
                                style="width: 40px;height: 40px; border-radius: 50%;"></p>
                        <p style="color: #666;">赵小刚</p>
                    </view>
                </view>
                <view
                    style="border-left: 3px solid rgb(129, 103, 245); display: flex; justify-content: space-between; padding: 20px 20px; box-shadow: 0 0 0 10px #fff; border-radius: 0 10px 10px 0; width: 320px; margin-top: 10px;">
                    <view style="color: #666;">
                        <p @click="yukehu" style="font-size: 14px; font-weight: bold; height: 30px;">与客户沟通报价事宜</p>
                        <p style="font-size: 12px; height: 30px;">2019-03-23 22:31 <span>紧急</span></p>
                        <p style="width: 200px;">
                            <u-line-progress :percentage="50" activeColor="" height="8" inactiveColor="#fff">
                                <text class="percentage">{{ 50 }}%</text>
                            </u-line-progress>
                        </p>
                    </view>
                    <view style="text-align: center;">
                        <p style="color: #999; display: flex; align-items: center; font-size: 10px;">
                            <text
                                style="width: 10px;height: 10px;margin-right: 5px; display: block; background-color: #fff;border:1px solid #ccc ;"></text>
                            未完成
                        </p>
                        <p @click="yutouxiang" style="margin-top: 10px;"><img src="/static/img/11.png" alt=""
                                style="width: 40px;height: 40px; border-radius: 50%;"></p>
                        <p style="color: #666;">赵小刚</p>
                    </view>
                </view>
                <view
                    style="border-left: 3px solid rgb(70, 76, 91); display: flex; justify-content: space-between; padding: 20px 20px; box-shadow: 0 0 0 10px #fff; border-radius: 0 10px 10px 0; width: 320px; margin-top: 10px;">
                    <view style="color: #666;">
                        <p @click="yukehu" style="font-size: 14px; font-weight: bold; height: 30px;">与客户沟通报价事宜</p>
                        <p style="font-size: 12px; height: 30px;">2019-03-23 22:31 <span>紧急</span></p>
                        <p style="width: 200px;">
                            <u-line-progress :percentage="100" activeColor="blue" height="8" inactiveColor="#fff">
                                <text class="percentagee">{{ 100 }}%</text>
                            </u-line-progress>
                        </p>
                    </view>
                    <view style="text-align: center;">
                        <p style="color: #999; display: flex; align-items: center; font-size: 10px;">
                            <img src="/static/yiwancheng.png" alt=""
                                style="width: 10px; height: 10px;vertical-align: middle; margin-right: 5px;">
                            未完成
                        </p>
                        <p @click="yutouxiang" style="margin-top: 10px;"><img src="/static/img/11.png" alt=""
                                style="width: 40px;height: 40px; border-radius: 50%;"></p>
                        <p style="color: #666;">赵小刚</p>
                    </view>
                </view>
                <view style="margin-top: 50px;"></view>
                <view class="bottom" @click="addputong">+</view>
            </view>
            <view v-if="currentTab === 1">

                <view style="border-bottom:1px solid #ccc ; background-color: #fff;">
                    <u-tabs :list="list" @click="click" lineWidth="20" lineHeight="7" lineColor="white" :activeStyle="{
                        color: '#09f',
                        transform: 'scale(1.05)'
                    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
                </view>

                <view
                    style="border-left: 3px solid orange; display: flex; justify-content: space-between; padding: 20px 20px; box-shadow: 0 0 0 10px #fff; border-radius: 0 10px 10px 0; width: 320px; margin-top: 10px;">
                    <view style="color: #666;">
                        <p @click="yukehu1" style="font-size: 14px; font-weight: bold; height: 30px;">与客户沟通报价事宜</p>
                        <p style="font-size: 12px; height: 30px;"><span>跟进时间：</span>2019-03-23 22:31 </p>
                        <p style="width: 200px;">

                            紧要程度：紧急
                        </p>
                    </view>
                    <view style="text-align: center;">
                        <p style="color: #999; display: flex; align-items: center; font-size: 10px;"><text
                                style="width: 10px;height: 10px; border-radius: 50%;margin-right: 5px; display: block; background-color: #fff;border:1px solid #ccc ;"></text>
                            进行中</p>
                        <p @click="yutouxiang" style="margin-top: 10px;"><img src="/static/img/11.png" alt=""
                                style="width: 40px;height: 40px; border-radius: 50%;"></p>
                        <p style="color: #666;">赵小刚</p>
                    </view>
                </view>

                <view
                    style="border-left: 3px solid #09f; display: flex; justify-content: space-between; padding: 20px 20px; box-shadow: 0 0 0 10px #fff; border-radius: 0 10px 10px 0; width: 320px; margin-top: 10px;">
                    <view style="color: #666;">
                        <p @click="yukehu1" style="font-size: 14px; font-weight: bold; height: 30px;">与客户沟通报价事宜</p>
                        <p style="font-size: 12px; height: 30px;"><span>跟进时间：</span>2019-03-23 22:31 </p>
                        <p style="width: 200px;">

                            紧要程度：紧急
                        </p>
                    </view>
                    <view style="text-align: center;">
                        <p style="color: #999; display: flex; align-items: center; font-size: 10px;">
                            <img src="/static/shizhong.png" alt=""
                                style="width: 10px; height: 10px;vertical-align: middle; margin-right: 5px;">
                            未开始
                        </p>
                        <p @click="yutouxiang" style="margin-top: 10px;"><img src="/static/img/11.png" alt=""
                                style="width: 40px;height: 40px; border-radius: 50%;"></p>
                        <p style="color: #666;">赵小刚</p>
                    </view>
                </view>
                <view
                    style="border-left: 3px solid rgb(75, 206, 208); display: flex; justify-content: space-between; padding: 20px 20px; box-shadow: 0 0 0 10px #fff; border-radius: 0 10px 10px 0; width: 320px; margin-top: 10px;">
                    <view style="color: #666;">
                        <p @click="yukehu1" style="font-size: 14px; font-weight: bold; height: 30px;">与客户沟通报价事宜</p>
                        <p style="font-size: 12px; height: 30px;"><span>跟进时间：</span>2019-03-23 22:31 </p>
                        <p style="width: 200px;">

                            紧要程度：紧急
                        </p>
                    </view>
                    <view style="text-align: center;">
                        <p style="color: #999; display: flex; align-items: center; font-size: 10px;">
                            <img src="/static/yiquxiao.png" alt=""
                                style="width: 10px; height: 10px;vertical-align: middle; margin-right: 5px;">
                            已取消
                        </p>
                        <p @click="yutouxiang" style="margin-top: 10px;"><img src="/static/img/11.png" alt=""
                                style="width: 40px;height: 40px; border-radius: 50%;"></p>
                        <p style="color: #666;">赵小刚</p>
                    </view>
                </view>


                <view
                    style="border-left: 3px solid rgb(251, 98, 96); display: flex; justify-content: space-between; padding: 20px 20px; box-shadow: 0 0 0 10px #fff; border-radius: 0 10px 10px 0; width: 320px; margin-top: 10px;">
                    <view style="color: #666;">
                        <p @click="yukehu1" style="font-size: 14px; font-weight: bold; height: 30px;">与客户沟通报价事宜</p>
                        <p style="font-size: 12px; height: 30px;"><span>跟进时间：</span>2019-03-23 22:31 </p>
                        <p style="width: 200px;">

                            紧要程度：紧急
                        </p>
                    </view>
                    <view style="text-align: center;">
                        <p style="color: #999; display: flex; align-items: center; font-size: 10px;">
                            <img src="/static/yichaoshi.png" alt=""
                                style="width: 10px; height: 10px;vertical-align: middle; margin-right: 5px;">
                            已超时
                        </p>
                        <p @click="yutouxiang" style="margin-top: 10px;"><img src="/static/img/11.png" alt=""
                                style="width: 40px;height: 40px; border-radius: 50%;"></p>
                        <p style="color: #666;">赵小刚</p>
                    </view>
                </view>
                <view
                    style="border-left: 3px solid rgb(129, 103, 245); display: flex; justify-content: space-between; padding: 20px 20px; box-shadow: 0 0 0 10px #fff; border-radius: 0 10px 10px 0; width: 320px; margin-top: 10px;">
                    <view style="color: #666;">
                        <p @click="yukehu1" style="font-size: 14px; font-weight: bold; height: 30px;">与客户沟通报价事宜</p>
                        <p style="font-size: 12px; height: 30px;"><span>跟进时间：</span>2019-03-23 22:31 </p>
                        <p style="width: 200px;">

                            紧要程度：紧急
                        </p>
                    </view>
                    <view style="text-align: center;">
                        <p style="color: #999; display: flex; align-items: center; font-size: 10px;">
                            <text
                                style="width: 10px;height: 10px;margin-right: 5px; display: block; background-color: #fff;border:1px solid #ccc ;"></text>
                            未完成
                        </p>
                        <p @click="yutouxiang" style="margin-top: 10px;"><img src="/static/img/11.png" alt=""
                                style="width: 40px;height: 40px; border-radius: 50%;"></p>
                        <p style="color: #666;">赵小刚</p>
                    </view>
                </view>
                <view
                    style="border-left: 3px solid rgb(70, 76, 91); display: flex; justify-content: space-between; padding: 20px 20px; box-shadow: 0 0 0 10px #fff; border-radius: 0 10px 10px 0; width: 320px; margin-top: 10px;">
                    <view style="color: #666;">
                        <p @click="yukehu1" style="font-size: 14px; font-weight: bold; height: 30px;">与客户沟通报价事宜</p>
                        <p style="font-size: 12px; height: 30px;"><span>跟进时间：</span>2019-03-23 22:31 </p>
                        <p style="width: 200px;">

                            紧要程度：紧急
                        </p>
                    </view>
                    <view style="text-align: center;">
                        <p style="color: #999; display: flex; align-items: center; font-size: 10px;">
                            <img src="/static/yiwancheng.png" alt=""
                                style="width: 10px; height: 10px;vertical-align: middle; margin-right: 5px;">
                            未完成
                        </p>
                        <p @click="yutouxiang" style="margin-top: 10px;"><img src="/static/img/11.png" alt=""
                                style="width: 40px;height: 40px; border-radius: 50%;"></p>
                        <p style="color: #666;">赵小刚</p>
                    </view>
                </view>
            </view>
            <view style="margin-top: 50px;"></view>
            <view class="bottom1" @click="addgenjin">+</view>
        </view>
        <view class="footer">

        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const currentTab = ref(0)
const switchTab = (tab: number) => {
    currentTab.value = tab;
};
const list = ref([
    { id: 0, name: '全部' },
    { id: 1, name: '进行中' },
    { id: 2, name: '未开始' },
    { id: 3, name: '已完成' },
    { id: 4, name: '未完成' },
    { id: 5, name: '已超时' },
    { id: 6, name: '已取消' },

])
const click = (item: any) => {
    console.log(item);
}
const yukehu = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiaokehuguanli/qiaogoutong'
    })
}
const yutouxiang = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaotouxiang'
    })
}
const yukehu1= () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiaokehuguanli/qiaoyukehu1'
    })
}
const fanhui = () => {
    uni.navigateBack({
        delta: 1
    })
}
const addputong = () => {
    uni.navigateTo({
        url:"/pages/qiao-crm/tan/qiaoputong"
    })
}

const addgenjin = () => {
    uni.navigateTo({
        url:"/pages/qiao-crm/tan/qiaogenjin"
    })
}

</script>

<style lang="scss">
.bottom {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: blue;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    float: right;
    position: fixed;
    bottom: 20px;
    right: 5px;
    z-index: 99;
}
.bottom1 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: blue;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    float: right;
    position: fixed;
    bottom: 20px;
    right: 5px;
}
.percentage {
    padding: 1px 5px;
    color: #000;
    border-radius: 100px;
    font-size: 10px;
    margin-right: -100px;
}

.percentagee {
    padding: 1px 5px;
    color: white;
    border-radius: 100px;
    font-size: 10px;
}

.active {
    background-color: rgb(0, 121, 254);
    color: #fff;

}

.a {
    width: 80px;
    height: 20px;
    border: 1px solid #09f;
    text-align: center;
    border-radius: 5px 0px 0 5px;
}

.b {
    width: 80px;
    height: 20px;
    border: 1px solid #09f;
    text-align: center;
    border-radius: 0px 5px 5px 0px;
}

.one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
    height: 40px;
}

.app {
    width: 100vw;
    height: 100vh;
    border-bottom: 1px solid #ccc;
    background-color: #eee;
}

.header {
    height: 50px;
    margin-top: 40px;
    width: 360px;
    margin-left: 8px;
    background-color: #fff;
}

.content {
    height: calc(100% - 50px - 0px);
    overflow: hidden;
    overflow-y: scroll;
    width: 360px;
    margin-left: 8px;

}

.footer {
    height: 0px;
}
</style>